(function () {
    'use strict';

    // load dependencies
    var animationControl = require('./animation-control.js');
    $(document).ready(function () {
		if(localStorage.getItem('id') == null) {
			var id = 1
		} else {
			var id = Number(localStorage.getItem('id')) + 1
		}
		
		if (Number(localStorage.getItem('id')) > 1) {
			var id = 1
			window.location.reload()
		}
		localStorage.setItem("id", id);


var bgMusic = $('audio').get(0);
 var manifest = [{
		src: "images/tloading.png",
		id: "tloading"
	}, {
		src: "images/Group.png",
		id: "Group"
	}, {
		src: "images/Group1.png",
		id: "Group1"
	}, {
		src: "images/Group2.png",
		id: "Group2"
	}, {
		src: "images/Group3.png",
		id: "Group3"
	}, {
		src: "images/bgm.png",
		id: "bgm"
	}, {
		src: "images/musi.png",
		id: "musi"
	}, {
		src: "images/gown.png",
		id: "gown"
	}, {
		src: "images/buy.png",
		id: "buy"
	}, {
		src: "images/go.png",
		id: "go"
	}, {
		src: "images/stop.png",
		id: "stop"
	}, {
		src: "images/Groupw.png",
		id: "Groupw"
	}, {
		src: "images/follow.png",
		id: "follow"
	}, {
		src: "images/musi.png",
		id: "musi"
	}, {
		src: "images/musigo.png",
		id: "musigo"
	}

	];

var preload = new createjs.LoadQueue(true);
preload.installPlugin(createjs.Sound);
preload.on("progress", handleFileProgress);
preload.on("complete", loadComplete);
preload.loadManifest(manifest);


function handleFileProgress(event) {
	$("#step").html((preload.progress * 100 | 0) + " %");
	$('.loadingline').css('width',(preload.progress * 10 | 1) + 'rem');
	$('.loadimg').css('left',(preload.progress * 10 | 0)+ 'rem')
}

function loadComplete(event) {
	$("#step").hide()
	$(".loadingline").hide()
	$('.loadimg').hide()
	$('.loading').show()
	setTimeout(function(){
		$('.loading-overlay').hide();
	},2000)
}
        var $btnMusic = $('.btn-music');
        var $upArrow = $('.up-arrow');
		var $follow = $('.follow');
		var $buy = $('.buy');
		var $onbuy = $('.slide-1-buy');
        // background music control
        $btnMusic.click(function () {
            if (bgMusic.paused) {
                bgMusic.play();
                $('.btn-music img').attr('src','images/musigo.png')
            } else {
                bgMusic.pause();
                $('.btn-music img').attr('src','images/musi.png')
            }
        });
        // init Swiper
        new Swiper('.swiper-container', {
            mousewheelControl: true,
            effect: 'coverflow',    // slide, fade, coverflow or flip
            speed: 400,
            direction: 'vertical',
            fade: {
                crossFade: false
            },
            coverflow: {
                rotate: 100,
                stretch: 0,
                depth: 300,
                modifier: 1,
                slideShadows: false     // do disable shadows for better performance
            },
            flip: {
                limitRotation: true,
                slideShadows: false     // do disable shadows for better performance
            },
            onInit: function (swiper) {
                animationControl.initAnimationItems();  // get items ready for animations
                animationControl.playAnimation(swiper); // play animations of the first slide
            },
            onTransitionStart: function (swiper) { 
				console.log(swiper.activeIndex)// on the last slide, hide .btn-swipe
                if (swiper.activeIndex === swiper.slides.length - 1) {
					
                    $upArrow.hide();
					$follow.show();
                } else {
					
                    $upArrow.show();
					$follow.hide();
                }
				if (swiper.activeIndex > 0) {
					$onbuy.hide()
					$buy.show()
				} else {
					$onbuy.show()
					$buy.hide()
				}
				
            },
            onTransitionEnd: function (swiper) {
                animationControl.playAnimation(swiper);
            },
            onTouchStart: function (swiper, event) {
                if (swiper.activeIndex == 0) {
                  // bgMusic.play();
                }
            }
        });
		
    });
})();


var canvas = document.getElementById('tongue'),
    stage = new createjs.Stage(canvas);
    
var stageWidth = canvas.width;
var stageHeight = canvas.height;

var charactor;

window.onload = function(){
  createjs.MotionGuidePlugin.install(createjs.Tween);
  charactor = new createjs.Bitmap('images/go.png').setTransform(0, 0, .08, .08, 0, 0, 0, 0, 0);
  stage.addChild(charactor);
  // 生成人物左右移动效果（无限循环）
  createjs.Tween.get(charactor, {bounce: true, loop:100})
				.to({guide: {path: [2,3, 1000,1000,   500, 30, 10,700,2,2]}}, 8000)

  
  createjs.Ticker.timingMode = createjs.Ticker.RAF;
  createjs.Ticker.addEventListener("tick", tick);
  
	var toggleGuide = false;
	function tick(event) {
		stage.update(event);

		if (toggleGuide) {
			// Since we are drawing this separately, it gets put on top of the rendered stage.
			createjs.MotionGuidePlugin.debug({path: [2,3, 1000,1000,   500, 30, 10,700,2,2]}, stage.canvas.getContext("2d"), [0,0.5,1]);
		}
	}
 createjs.Touch.enable(stage);
 charactor.addEventListener("mousedown", handleClick);
 function handleClick(event) {
   var img =  $('<img src="images/stop.png">')[0];
   var stopimg = $('<img src="images/go.png">')[0];
   charactor.image = img
   createjs.Ticker.paused = true
   setTimeout(function() {
	   createjs.Ticker.paused = false
	   charactor.image = stopimg
   },1000)
 }
};

 